<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>03-axios.create方法</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<!-- axios.create(config)
      1.根据指定配置创建一个新的axios,也就就每个新axios都有自己的配置
      2.新axios只是没有取消请求和批量发请求的方法,其它所有语法都是一致的
      3.为什么要设计这个语法?
        (1)需求:项目中有部分接口需要的配置与另一部分接口需要的配置不太一样,
        (2)解决:创建2个新axios,每个都有自己特有的配置,分别应用到不同要求的接口请求中

 -->

<body>
  <button id="addPersonBtn">点击添加一个人</button>
  <input type="text" id="personName" placeholder="请输入姓名">
  <input type="text" id="personAge" placeholder="请输入年龄">
  <br><br>
  <button id="testBtn">点击获取测试信息</button>
  <br><br>
  <button id="getSentencesBtn">点击获取一句短语</button>

  <script>
    //获取dom节点
    const addPersonBtn = document.getElementById('addPersonBtn');
    const testBtn = document.getElementById('testBtn');
    const getSentencesBtn = document.getElementById('getSentencesBtn');
    const personName = document.getElementById('personName');
    const personAge = document.getElementById('personAge');

    //  添加axios全局默认配置
    // axios.defaults.baseURL = 'http://localhost:5000';             //配置全局默认请求基础地址
    // axios.defaults.timeout = 2000;                                //配置全局默认超时时间
    // axios.defaults.headers = { token: 'er908s0rfsjflxmvnljf' };   //配置全局默认请求头

    //axios_0.27.2版本可以将全局默认配置写成对象形式
    axios.defaults = {
      baseURL: 'http://localhost:5000',             //配置全局默认请求基础地址
      timeout: 2000,                                //配置全局默认超时时间
      headers: { token: 'er908s0rfsjflxmvnljf' },   //配置全局默认请求头
    }

    //axios_0.27.2版本创建新的axios位置随意，只要在使用之前就行
    const axios2 = axios.create({
      baseURL: 'https://api.apiopen.top/api',             //配置全局默认请求基础地址
      timeout: 2000,                                //配置全局默认超时时间
    })

    // 添加一个人，年龄和名字--发送POST请求--携带json编码参数或urlencoded编码
    addPersonBtn.onclick = () => {
      // 完整版
      axios({
        url: '/person',                                               //请求地址
        method: 'POST',                                               //请求方式
        params: { a: 1, b: 2 },                                       //携带的是query参数
        data: { name: personName.value, age: personAge.value },       //携带请求体参数，json编码 
        // data: `name=${personName.value}&age=${personAge.value}`,   //携带请求体参数，urlencoded编码
        // timeout: 2000,                                                //设置超时时间为2s
        // headers: { token: 'er908s0rfsjflxmvnljf' },                   //配置请求头
        responseType: 'json'                                          //配置相应数据格式（默认值json）
      }).then(
        response => { console.log(response.data); },
        error => { console.log(error); }
      );
    };

    // 获取测试信息
    testBtn.onclick = () => {
      axios({
        url: '/test1?delay=5000',
        method: 'GET',
        // timeout: 2000
      }).then(
        response => { console.log(response.data); },
        error => { console.log(error); }
      );
    }

    //从另外一台服务器获取一句短语，就需要配置多个axios
    getSentencesBtn.onclick = () => {
      axios2({
        url: '/sentences',
        method: 'GET',
      }).then(
        response => { console.log(response.data); },
        error => { console.log(error); }
      );
    }

  </script>
</body>

</html>